<!-- prettier-ignore -->
<template>
  <el-dialog :visible.sync="dialogVisible" title="发布服务" width="30%">
    <el-form label-width="120px" size="small">
      <el-form-item label="服务名称">
        <el-input v-model="servieName"></el-input>
      </el-form-item>
      <el-form-item label="服务类型">
        <el-radio-group v-model="serviceType">
          <el-radio label="api">REST API</el-radio>
          <el-radio label="wms">OGC WMS</el-radio>
          <el-radio label="wmts">OGC WMTS</el-radio>
        </el-radio-group>
        <el-button type="primary" @click="previewShow = true">服务预览</el-button>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input v-model="creator"></el-input>
      </el-form-item>
      <el-form-item label="所属单位">
        <el-input v-model="unit"></el-input>
      </el-form-item>
      <el-form-item label="数据范围">
        <el-cascader v-model="taskRange" :props="cityProps" clearable style="width: 100%"></el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    <preview v-if="previewShow" :previewUrl="previewUrl" :rangeEntity="rangeEntity" :show.sync="previewShow"></preview>
  </el-dialog>
</template>

<script>
import axios from 'axios'

import preview from '@/views/dataAssembly/preview.vue';
export default {
  name: 'publishDialog',
  props:{
    show:{
      type:Boolean,
      default:false
    },
    previewUrl:{
      type:Object,
      default:null
    },
    rangeEntity:{
      type:Array,
      default:null
    }
  },
  components:{preview},
  data(){
    return{
      previewShow:false,
      serviceType:'wmts',
      cityProps: {
        value: "name",
        label: "name",
        checkStrictly: true,
        children: "districts",
        lazy: true,
        lazyLoad: this.getCityProps,
      },
      taskRange:[],
      servieName:'',
      serviceUrl:'',
      creator:'',
      unit:''
    }
  },
  computed:{
    dialogVisible:{
      get(){
        return this.show
      },
      set(val){
        this.$emit('update:show',val)
      }
    }
  },
  methods:{
    // 获取城市信息
    async getCityProps(node, resolve) {
      let nodes = [];
      let keywords = ''
      if (node.level === 0) {
        keywords = '黄冈市'
      } else {
        keywords = node.value
      }
      let res = await axios.get(
        "https://restapi.amap.com/v3/config/district",
        {
          params: {
            keywords,
            subdistrict: 2,
            key: "4bb9d93c9b35ffdc9a5177d230394f23",
          },
        }
      );
      res.data.districts[0].districts.forEach((item) => {
        const leaf = !item.districts.length;
        nodes.push({ ...item,leaf });
      });
      resolve(nodes)
    },
  }
};
</script>

<style lang="less" scoped>

</style>